Estoy creando un mini editor de SVG, lo estoy haciendo con JavaScript puro y me gustaría generar un SVG limpio, por lo tanto, ¿existe una fórmula, patrón, lógica, algoritmo, etc., para obtener los valores actuales de la línea de comando (también conocido como ruta de dibujo) al aplicar una propiedad de transformación a una ruta svg? ¿Alguna documentación, artículo, tutorial, etc.? No he podido encontrar resultados que expliquen algo así o que ayuden al problema que tengo, principalmente porque no se como podría buscar este tema o las palabras clave a las que se refiere este tema. Por ejemplo:
<svg width="111" height="95" viewBox="0 0 111 95" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="my-path" transform="rotate(20)" d="M0.25 0L55 35L110.75 0V95L55 63L0.25 95V0Z" fill="#C4C4C4" /> </svg>y en el código JavaScript tiene algo como esto:
const myPath = document.getElementById('my-path'); console.log(myPath.getRealValuesOfAttributeD()); // or const getCurrentValuesOfAttributeD = (svgPathElement) => { // the formula, pattern, logic, algorithm, etc., goes here. }; console.log(getCurrentValuesOfAttributeD(myPath));Esta es una introducción a las matemáticas de matriz de transformación para rotar, traducir, etc., que necesitará para hacer los cálculos:
Como dice Robert, las matemáticas son bastante complicadas y hay casos difíciles de manejar como el comando S. También necesitaría convertir cada comando de ruta relativa en una ruta absoluta para obtener las matemáticas correctas.
Si está haciendo esto porque tiene miedo de tener un lío de transformaciones anidadas, entonces una forma más fácil de hacerlo podría ser consolidar las transformaciones anidadas multiplicando sus equivalentes de matriz, lo que da como resultado una sola transformación de matriz para cada elemento o grupo. . Todavía es un montón de matemáticas, pero un orden de magnitud más fácil que hacer esos cálculos de ruta.